import React, { useEffect, useState } from "react";
import { Table, Button, Modal, Col, Row, Input, Select, Checkbox, message as antdMessage } from "antd";
import { ColumnsType } from "antd/es/table";
import axios from "axios";
interface ListItem {
  isVerify: boolean;
  id: string;
  name: string;
  address: string;
  tel: string;
  sex: string;
  age: number;
}

const Index = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [item, setItem] = useState<ListItem>({
    isVerify: false,
    id: "",
    name: "",
    address: "",
    tel: "",
    sex: "",
    age: 1,
  });
  const columns: ColumnsType<ListItem> = [
    {
      title: "ID",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "城市",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "操作",
      render(_) {
        return (
          <div>
            <Button
              onClick={() => {
                setIsModalVisible(true);
                setItem(_);
              }}
            >
              编辑
            </Button>
          </div>
        );
      },
    },
  ];

  const handleOk = async () => {
    setIsModalVisible(false);
    const resp = await axios.post("/api/person/list/" + item.id, item);
    const { code, message } = resp.data;
    if(code === 200) {
      fetchList()
      antdMessage.success(message)
    }
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const fetchList = async () => {
    const resp = await axios.get("/api/person/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    fetchList();
  }, []);

  return (
    <div>
      <Table<ListItem>
        rowKey={(record) => record.id}
        dataSource={list}
        columns={columns}
      ></Table>
      <Modal
        title="修改"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>ID: </Col>
          <Col span={16}>
            <Input disabled value={item.id} onChange={() => {}}></Input>
          </Col>
        </Row>
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>姓名: </Col>
          <Col span={16}>
            <Input
              value={item.name}
              onChange={(e) => setItem({ ...item, name: e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>城市: </Col>
          <Col span={16}>
            <Input
              value={item.address}
              onChange={(e) => setItem({ ...item, address: e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>年龄: </Col>
          <Col span={16}>
            <Input
              type="number"
              value={item.age}
              onChange={(e) => setItem({ ...item, age: +e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>性别: </Col>
          <Col span={16}>
            <Select
              value={item.sex}
              onChange={(value) => setItem({ ...item, sex: value })}
            >
              <Select.Option value="男">男</Select.Option>
              <Select.Option value="女">女</Select.Option>
            </Select>
          </Col>
        </Row>
        <Row style={{ margin: "10px 0" }}>
          <Col span={4}>是否审核: </Col>
          <Col span={16}>
            <Checkbox
              checked={item.isVerify}
              onChange={(e) => {
                setItem({ ...item, isVerify: e.target.checked });
              }}
            ></Checkbox>
          </Col>
        </Row>
      </Modal>
    </div>
  );
};

export default Index;
